<template>
  <div style="height:100%;width:100%;padding:0 80px 0 30px">
    <div class="top">
      <a href="javascript:;" class="back" v-if="isShow" @click="goBack" style="font-size:14px">
        <i class="el-icon-arrow-left"></i> 返回课程
      </a>
      <el-input v-model="query.className" placeholder="请输入班级名" style="width:200px;" size="mini"></el-input>
      <el-button type="primary" size="mini" @click="search">查询</el-button>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%;height:100%:font-size:16px"
        height="100%"
        row-class-name="body-font"
        header-row-class-name="header-bg"
      >
        <el-table-column prop="id" label="班级编号" width="180" align="center"></el-table-column>
        <el-table-column prop="className" label="班级名称" width="300" align="center"></el-table-column>
        <el-table-column prop="stuCount" label="人数" align="center"></el-table-column>
        <el-table-column prop label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="goAttendce(scope.row)">进行签到</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="15"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { classList } from "@/api/student";
import { mapGetters } from "vuex";
import History from "@/util/history";
export default {
  name: "ManageTraineeAttendce",
  data() {
    return {
      query: {
        className: "",
        pageSize: 15,
        pageIndex: 1
      },
      isShow: false,
      tableData: [],
      total: 0
    };
  },
  computed: {
    ...mapGetters(["getIsSign", "getHisRoute"])
  },
  methods: {
    goBack() {
      this.$router.goBack();
    },
    goAttendce(row) {
      if (!this.getIsSign) {
        this.$message({
          message: "签到器基站未能连接成功，请选择手动签到",
          type: "warning"
        });
      }
      this.$router.push({
        path: "/manageTrainee/student/attendance/" + row.id
      });
    },
    currentChange(page) {
      this.query.pageIndex = page;
      this.getData();
    },
    search() {
      this.query.pageIndex = 1;
      this.getData();
    },
    getData() {
      classList(this.query)
        .then(res => {
          if (res.code == 1) {
            this.tableData = res.response.list;
            this.total = res.response.total;
          }
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  created() {
    this.getData();
    if (History._history.length > 1) {
      if (
        History._history[History._history.length - 2].indexOf(
          "/train/detail/"
        ) != -1
      ) {
        this.isShow = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.back {
  margin-right: 10px;
}
.top {
  padding: 25px 0;
}
.table {
  height: calc(100% - 150px);
  width: 100%;
  overflow: hidden;
}
.header-bg {
  background-color: #dee6ec !important;
  th {
    background-color: #dee6ec !important;
    color: #101010;
    font-weight: 400;
    font-size: 20px;
  }
}
.body-font {
  font-size: 18px;
}
.pager {
  height: 32px;
  box-sizing: content-box;
  padding: 20px 0;
  text-align: center;
}
</style>